{% extends 'blog/base.html' %}

{% load blog_extras %}

{% block content %}
    {% comment %} 循环浏览后端获取的所有帖子 {% endcomment %}

    <!-- 包含其他元素的白框 -->
    <div class="box"> <!-- 元素 -->
        <!-- 
            section 可以把页面划分为多个部分 
            .hero   允许您向网页添加全宽横幅，它也可以选择覆盖页面的整个高度。 is-可以有多个颜色 
        -->
        <section class="hero is-primary is-medium"> <!-- 布局 -->
            <!-- 上面预留一些空间 -->
            <div class="hero-body">
                <p class="title">{{post.title}}</p>
                <p class="subtitle">{{post.created_at|date:"Y-m-d H:i"}}</p>
            </div>
        </section>

        <!-- 内容区域 -->
        <div class="content intro"> <!-- 元素 -->
            <p>{{ post.intro }}</p>
        </div>

        <div class="content"> <!-- 元素 -->
            <p>{{ post.body | convert_markdown | safe}}</p>
        </div>
    </div>

{% endblock content %}